<template>
  <div class="left-7">
    <div v-for="(item, index) in dealData" :key="item.orderFlowId">
      <el-row v-if="item.acceptProcessName">
        <el-col :span="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="leftLabelSpan" class="rowTitle">受理人：</el-col>
              <el-col
                :span="24 - leftLabelSpan"
                class="rowValue"
                :title="item.acceptProcessName"
                >{{ item.acceptProcessName }}</el-col
              >
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="leftLabelSpan" class="rowTitle">受理时间：</el-col>
              <el-col
                :span="24 - leftLabelSpan"
                class="rowValue"
                :title="
                  item.enableAcceptanceMode === '2'
                    ? item.flowEndTime
                    : item.flowNodeTime
                "
                >{{
                  item.enableAcceptanceMode === "2"
                    ? item.flowEndTime
                    : item.flowNodeTime
                }}</el-col
              >
            </el-row>
          </el-col>
        </el-col>
      </el-row>
      <el-row v-if="item.flowEndTime">
        <el-col :span="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="leftLabelSpan" class="rowTitle">操作人：</el-col>
              <el-col :span="24 - leftLabelSpan" class="rowValue">{{
                item.processName
              }}</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="leftLabelSpan" class="rowTitle">操作时间：</el-col>
              <el-col :span="24 - leftLabelSpan" class="rowValue">{{
                item.flowEndTime
              }}</el-col>
            </el-row>
          </el-col>
        </el-col>
        <el-row>
          <el-col :span="24">
            <el-col :span="12">
              <el-row>
                <el-col :span="leftLabelSpan" class="rowTitle"
                  >{{
                    flowLinkTypeNameFun(
                      item.flowLinkType == 0
                        ? item.flowLinkType - 1
                        : item.flowLinkType
                    )
                  }}环节：</el-col
                >
                <el-col
                  :span="24 - leftLabelSpan"
                  class="rowValue"
                  :title="item.nextLinkName"
                  >{{ item.nextLinkName }}</el-col
                >
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row v-show="showProcessName(item)">
                <el-col :span="leftLabelSpan" class="rowTitle">处理人：</el-col>
                <el-col
                  :span="24 - leftLabelSpan"
                  class="rowValue"
                  :title="item.nextLinkProcessName"
                  >{{ item.nextLinkProcessName }}</el-col
                >
              </el-row>
            </el-col>
          </el-col>
        </el-row>
        <el-col :span="24">
          <el-row>
            <el-col :span="leftLabelSpan" class="rowTitle"
              >{{
                item.flowLinkType == "0"
                  ? "处置结果"
                  : flowLinkTypeNameFun(item.flowLinkType) + "说明"
              }}：</el-col
            >
            <el-col :span="24 - leftLabelSpan" class="rowValue">
              <p class="hiddenText" :title="item.remark">{{ item.remark }}</p>
              <audioPlay v-if="item.voice" :voice="item.voice"></audioPlay>
            </el-col>
          </el-row>
        </el-col>
        <el-row v-if="item.orderFileList && item.orderFileList.length > 0">
          <el-col :span="24">
            <el-row class="annex-top">
              <el-col :span="leftLabelSpan" class="rowTitle">附件：</el-col>
              <el-col :span="24 - leftLabelSpan" class="rowValue">
                <EventFileUpload :value="item.orderFileList" disabled />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-col
              :span="24"
              v-if="
                item.nextLinkId == 6 ||
                item.nextLinkId == 0 ||
                item.nextLinkId == 7
              "
            >
              <el-row>
                <el-col :span="leftLabelSpan" class="rowTitle"
                  >关闭说明：</el-col
                >
                <el-col
                  :span="24 - leftLabelSpan"
                  class="rowValue"
                  :title="item.closeRemark"
                  >{{ item.closeRemark }}</el-col
                >
              </el-row>
            </el-col>
          </el-col>
        </el-row>
      </el-row>
    </div>
  </div>
</template>

<script>
import audioPlay from "@/components/eventManagement/audioPlay";
import EventFileUpload from "@/views/pages/eventManagement/components/EventFileUpload.vue";
export default {
  name: "DispostInfo",
  props: {
    dealData: {
      type: Array,
      default: [],
    },
  },
  components: {
    audioPlay,
    EventFileUpload,
  },
  data() {
    return {
      leftLabelSpan: 12,
      showImgViewer: false,
      selectImgIndex: 0,
    };
  },
  mounted() {
    let _this = this;
    window.onresize = () => {
      if (_this.checkFullScreen()) {
      } else {
        this.fullPauseVideo();
      }
    };
  },
  methods: {
    videoLeave() {
      this.$refs.video[0].pause();
    },
    previewVideo() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    full(element) {
      if (!this.checkFullScreen()) {
        let el = document.getElementById(element) || document.documentElement;
        const rfs =
          el.requestFullScreen ||
          el.webkitRequestFullScreen ||
          el.mozRequestFullScreen ||
          el.msRequestFullscreen;
        if (typeof rfs !== "undefined" && rfs) {
          rfs.call(el);
        }
      } else {
        this.outFullScreen();
      }
    },
    /*
     * 判断是否处于全屏状态
     * */
    checkFullScreen() {
      const mozFullScreen =
        document.mozFullScreen || document.mozRequestFullScreen;
      const fullScreen = document.fullScreen || document.msFullscreenEnabled;
      const webkitIsFullScreen =
        document.webkitIsFullScreen || document.webkitRequestFullScreen;
      let isFull = mozFullScreen || fullScreen || webkitIsFullScreen;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
    /**
     * 退出全屏
     */
    outFullScreen() {
      let fullscreenEnabled =
        document.fullscreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.msFullscreenEnabled;
      if (!fullscreenEnabled) {
        return false;
      }
      let fullscreenElement =
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement;
      if (fullscreenElement !== undefined) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else {
          return false;
        }
      }
    },
    fullPauseVideo() {
      let videoList = document.querySelectorAll("video");
      for (let i = 0; i < videoList.length; i++) {
        videoList[i].pause();
      }
    },
    flowLinkTypeNameFun(val) {
      switch (val) {
        case "0":
          return "处置";
        case "1":
          return "转派";
        case "2":
          return "回退";
        case -1:
          return "下一";
      }
      return "";
    },
    onPreview(index) {
      this.selectImgIndex = index;
      this.showImgViewer = true;
    },
    disableContextmenu() {
      return false;
    },
    closeViewer() {
      this.showImgViewer = false;
    },
  },
  computed: {
    showProcessName() {
      return (data) => {
        if (data.nextLinkId === "0") {
          // 误报完结
          return false;
        }
        if (data.nextLinkId === "6") {
          // 完结
          return false;
        }
        if (data.nextLinkId === "7") {
          // 重复告警完结
          return false;
        }
        return true;
      };
    },
  },
};
</script>

<style scoped lang="scss">
.annex-top {
  margin-top: 2px;
  display: flex;
  .rowValue {
    flex: 1;
  }
}
.rowTitle {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #909399;
  line-height: 35px;
  text-align: right;
  max-width: 151px;
  white-space: nowrap;
}
.rowValue {
  line-height: 35px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.common-item {
  height: 50px;
  width: 80px;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  cursor: pointer;
}
.common-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.table-img-tooltip {
  margin: -20px 0 -30px -20px;
  width: 500px;
  height: 282px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  border-radius: 2px;
}
.img-wrapper {
  height: 50px;
  width: 80px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  cursor: pointer;
  margin-right: 10px;
}
.hiddenText {
  text-overflow: ellipsis;
  overflow: hidden;
}
/deep/.el-dialog {
  top: 40%;
}
/deep/.el-dialog__body {
  aspect-ratio: 16 / 9;
}
.video-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/.el-carousel__container {
  height: 100%;
  width: 100%;
}
/deep/.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
